<template>
   <swiper
        :navigation = "{
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }"
        :modules="modules"
        :slidesPerView="1"
        :centeredSlides="true"
        :spaceBetween="0"
        :virtual="photoList.length > 3"
        :speed="5000"
        :loop="true"
        :autoplay="{
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            pauseOnMouseEnter: false,
        }"
        class="recipe-swiper"
        @activeIndexChange="handleActiveIndexChange"
        @swiper="setSwiperRef">
        <swiper-slide class="slide" v-for="(photos, index) in photoList" :key="index">
            <PhotoWall :photos="photos" />
        </swiper-slide>
    </swiper>
</template>

<script>
import { ref, defineComponent, onMounted } from "vue";
import { Swiper, SwiperSlide} from 'swiper/vue';
import { Navigation, Virtual, Autoplay  } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/bundle';
import imgs from '@/data/img.json'
import PhotoWall from "@/views/home/PhotoWall.vue";
import useKeyboard from "@/views/home/useKeybord";


// 当photoList长度大于3，即swiper-slide大于3时，才开启虚拟DOM
export default defineComponent({
    components: {
        PhotoWall,
        Swiper,
        SwiperSlide
    },
    setup() {
        let swiperRef;
        let loop = ref(false)
        let activeIndex = ref(0);
        const keybordControl = true // 是否使用键盘控制
        const setSwiperRef = (swiper) => {
            swiperRef = swiper;
            swiperRef.enable = false
        };

        const groupImg = (arr, groupNum = 27) => {
            let result = []
            for (let i = 0; i < arr.length; i += groupNum) {
                result.push(arr.slice(i, i+ groupNum))
            }
            return result
        }
        console.warn('照片总张数', imgs.data.length)
        let photoList = groupImg(imgs.data, 27)
        // console.log('photoList', photoList)
        const photoListLen = photoList.length
        const lastPhotoListNum = photoList[photoListLen - 1].length
        console.warn('slide总数', photoListLen)
        // 最后一组少于27个，补齐以防数据错乱
        if (lastPhotoListNum < 27) {
            const paddingNum = 27 - lastPhotoListNum
            for (let i = 1; i <= paddingNum; i ++) {
                photoList[photoListLen - 1].push('')
            }
        }
        if (photoList.length > 3) {
            loop.value = true
        }

        // console.log('photoList========', photoList)

        // swiper方法
        const slideTo = (index) => {
            swiperRef.slideTo(index, 30)
        }


        const handleActiveIndexChange = (swiper) => {
            activeIndex.value = swiper.activeIndex
            console.log('更新索引', activeIndex.value)
        }

        onMounted(() => {})

        useKeyboard(code => {
            if (keybordControl) {
                handleKeyPress(swiperRef, code)
            }
        })

        // 按空格键暂定或播放
        let play = true
        const handleKeyPress = (swiper, keyCode) => {
            if (keyCode === 32) {
                play = !play
                play ? swiper.autoplay.start() : swiper.autoplay.stop();
                console.warn(`${play ? '开始播放' : '暂定播放'}`)
                return
            }

            if (!play) {
                if (keyCode === 37) {
                    slideTo(swiper.activeIndex - 1)
                }
                if (keyCode === 39) {
                    slideTo(swiper.activeIndex + 1)
                }
            }
        }


        return {
            setSwiperRef,
            modules: [Virtual,Navigation, Autoplay],
            handleActiveIndexChange,
            photoList,
            loop,
        }
    }

})
</script>

<style>
.slide {
    width: 100vw;
    height: 100vh;
    background-color: #000000;
}
</style>
